<template>
  <div>
    <el-card class="box-card">
    <div slot="header" class="clearfix bg">
      <span>体检人信息</span>
    </div>
    <!-- 下面展示 -->
    <div class="bttom">
        <el-form ref="form" :model="obj" label-width="100px" size="mini" disabled>
          <el-form-item label="患者信息">
            <el-input v-model="obj.name"></el-input>
          </el-form-item>
          <el-form-item label="就诊卡号">
            <el-input v-model="obj.hospitalNum"></el-input>
          </el-form-item>
           <el-form-item label="证件类型">
            <el-input v-model="obj.idtype">
            </el-input>
          </el-form-item>
          <el-form-item label="证件号码">
            <el-input v-model="obj.idNUm">
            </el-input>
          </el-form-item>
          <el-form-item label="微信昵称">
            <el-input v-model="obj.hospitalNum"></el-input>
          </el-form-item><el-form-item label="手机号码">
            <el-input v-model="obj.phone"></el-input>
          </el-form-item>
          <el-form-item label="就诊人地址">
            <el-input v-model="obj.address"></el-input>
          </el-form-item>

        </el-form>
        <div class="right">
           <div class="one">
              <span>患者头像</span>
              <img :src="require('../../../../assets/xh.webp')" alt="">
           </div>
            <div class="two">
              <span style="color:#aaaaaa;">关系</span>
              <span style="margin-left:50px;">本人</span>
            </div>
        </div>
    </div>


  </el-card>
  <el-card >
     <div slot="header" class="clearfix bg">
      <span>预约信息</span>
    </div>
    <el-form ref="ruleForm" :rules="rules" :model="obj1" label-width="120px" size="mini" class="seeForm">
          <el-form-item label="就诊医院">
            <el-input v-model="obj1.hospital"></el-input>
          </el-form-item>
          <el-form-item label="医院地址">
            <el-input v-model="obj1.address"></el-input>
          </el-form-item>
           <el-form-item label="报到科室">
            <el-input v-model="obj1.idtype">
            </el-input>
          </el-form-item>
          <el-form-item label="预约体检时间">
            <el-input v-model="obj1.makeTime">
            </el-input>
          </el-form-item>
          <el-form-item label="候诊时间">
            <el-input v-model="obj1.witeTime"></el-input>
          </el-form-item><el-form-item label="体检套餐">
            <el-input v-model="obj1.package1"></el-input>
          </el-form-item>
          <el-form-item label="体检费">
           <el-input v-model="obj1.cost"></el-input>
         </el-form-item>
          <el-form-item label="预约时间">
            <el-input v-model="obj1.dateaphy"></el-input>
          </el-form-item>
          <el-form-item label="状态">
              <el-input v-model="packageType[obj1.state]" disabled></el-input>
          </el-form-item>
          <el-form-item label="报告时间">
            <el-input v-model="obj1.dateaphy"></el-input>
          </el-form-item>
          <el-form-item class="watch">
            <el-button type="primary" class="watchbtn" @click='watchbtn'>查看报告</el-button>
          </el-form-item>
          <el-form-item class="yy" label="预约备注" prop='bz'>
            <el-input v-model="obj1.bz" class="yubz"  placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="bbtn" @click="submitForm('ruleForm')">保存</el-button>
            <el-button @click="resetForm('ruleForm')">取消</el-button>
          </el-form-item>
        </el-form>
          
           
         
  </el-card>
  </div>
</template>

<script>
export default {
  props:['obj'],
  data() {
    return {
       packageType:{ //映射对象
       0:'已退款',
       1:'已完成',
       2:'待体检'
      },
      obj1:JSON.parse(JSON.stringify(this.obj)),
       rules:{
        bz: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
       }
    }
  },
  methods:{
     submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
            // console.log(this.obj);
            this.$emit('editInfo',this.obj1)
          } else {
             this.$message({
              message: '请填写完整',
              type: 'warning'
            });
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$emit('off')
      },
      // 查勘报告 
      watchbtn(){
        this.$emit('watchbtnShow')
      }
  }
}
</script>

<style lang="less" scoped>
.box-card{
  margin-bottom: 30px;
}
/deep/.el-card__header{
  background: #f2f2f2;
  .bg{
    color: #006eff;
    font-weight: 600;
  }

}

.bttom{
  display: flex;
  .el-form{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 50%;
    /deep/.el-input__inner{
      font-size: 16px;
      border: none;
      background: none;
    }
    /deep/.el-form-item__label{
       color: #aaaaaa;
       font-size: 16px;
       text-align: left;
    }
  }
  .right{
    width: 50%;
    height: 100%;
    .one{
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     color: #aaaaaa;
      img{
        width: 80px;
        border-radius: 50%;
        vertical-align: center;
        margin-left: 50px;
      }
    }
    .two{
       display: flex;
       justify-content: center; 
       margin-top: 30px;
       >span{
         width: 64px;
       }
    }
  }
}
.seeForm{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .el-form-item{
    width: 30%;
  }
  /deep/.el-input__inner{
    font-size: 16px;
    border: none;
    background: #f2f2f2;
  }
  /deep/.el-form-item__label{
    color: #aaaaaa;
    font-size: 16px;
    text-align: left;
  }
  .yy{
    width: 100%;
  }
  .yubz{
    width: 520px;
  }
  .watch{
    transform: translateX(-650px);
    // color: #006eff;
   .watchbtn{
     background: #006eff;
   }
  }
  .bbtn{
     background: #006eff;
  }
}
</style>